import 'package:cached_network_image/cached_network_image.dart';
import 'package:city_pickers/city_pickers.dart';
import 'package:city_pickers/modal/result.dart';
import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:taonile/config/config.dart';
import 'package:taonile/utils/common_utils.dart';

import '../entity/goods_category_entity.dart';
import '../http/api.dart';
import '../routers/routers.dart';
import '../views/dialog_manager.dart';

///
/// 商品分类
///
class ProductClassifyPage extends StatefulWidget {
  const ProductClassifyPage({Key? key}) : super(key: key);

  @override
  State<ProductClassifyPage> createState() => _ProductClassifyPageState();
}

class _ProductClassifyPageState extends State<ProductClassifyPage> {
  List<GoodsCategoryData> classifyListLeft = [];
  List<GoodsCategoryData> classifyListRight = [];

  int _classifyIndex = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getCategoryLeft();
  }

  getCategoryLeft() async {
    dynamic result = await Api.goodsCategoryList({});
    GoodsCategoryEntity entity = GoodsCategoryEntity.fromJson(result);
    setState(() {
      classifyListLeft.clear();
      classifyListLeft.addAll(entity.data);
      if (classifyListLeft.isNotEmpty) {
        getCategoryLeft2(classifyListLeft[0].id);
      }
    });
  }

  getCategoryLeft2(String pid) async {
    dynamic result = await Api.goodsCategoryList({'pid': pid});
    GoodsCategoryEntity entity = GoodsCategoryEntity.fromJson(result);
    setState(() {
      classifyListRight.clear();
      classifyListRight.addAll(entity.data);
    });
  }

  Widget getListItem(int index) {
    return Container(
      height: 100.w,
      margin: EdgeInsets.only(left: 12.w),
      decoration: BoxDecoration(
        color: _classifyIndex == index ? Config.colorBg2 : Config.colorWhite,
        borderRadius:
            BorderRadius.only(topLeft: Radius.circular(15.w), bottomLeft: Radius.circular(15.w)),
      ),
      width: double.infinity,
      child: InkWell(
        onTap: () {
          setState(() {
            _classifyIndex = index;
            getCategoryLeft2(classifyListLeft[_classifyIndex].id);
          });
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              classifyListLeft[index].name,
              style: TextStyle(
                  fontSize: _classifyIndex == index ? 27.sp : 24.sp, color: Config.colorText1),
            ),
          ],
        ),
      ),
    );
  }

  Widget getSecondList(int index) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 25.w),
      decoration: const BoxDecoration(
        color: Config.colorWhite,
      ),
      width: 100.w,
      child: InkWell(
        onTap: () {
          Routes.navigateTo(context, Routes.productList,
              params: {'cateId': classifyListRight[index].id});
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(12.w),
              child: CachedNetworkImage(
                imageUrl: CommonUtils.compressImageUrl(classifyListRight[index].imgPath, 200, 200),
                fit: BoxFit.fill,
                width: 100.w,
                height: 100.w,
                errorWidget: (context, url, error) {
                  return Image.asset(
                    'assets/images/bg_default_400.png',
                    width: 100.w,
                    height: 100.w,
                    fit: BoxFit.fill,
                  );
                },
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 12.w),
            ),
            Text(
              classifyListRight[index].name,
              style: TextStyle(fontSize: 24.sp, color: Config.colorText1),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Config.colorBg2,
        appBar: AppBar(
          title: const Text('商品分类'),
          centerTitle: true,
        ),
        body: Container(
          width: double.infinity,
          height: double.infinity,
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                decoration: BoxDecoration(color: Config.colorWhite),
                width: 200.w,
                height: double.infinity,
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemCount: classifyListLeft.length,
                  padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                  itemBuilder: (BuildContext context, int index) {
                    return getListItem(index);
                  },
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  color: Config.colorWhite,
                  borderRadius: BorderRadius.circular(15.w),
                ),
                width: 500.w,
                margin: EdgeInsets.all(25.w),
                height: double.infinity,
                child: GridView.builder(
                  shrinkWrap: true,
                  physics: const BouncingScrollPhysics(),
                  itemCount: classifyListRight.length,
                  padding: EdgeInsets.symmetric(vertical: 0.w, horizontal: 0.w),
                  itemBuilder: (BuildContext context, int index) {
                    return getSecondList(index);
                  },
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      mainAxisSpacing: 0.w,
                      crossAxisSpacing: 0.w,
                      childAspectRatio: 0.82),
                ),
              )
            ],
          ),
        ));
  }
}
